<template>
    <view class="restaurant-categories-manage">
		<view v-if="isEmptyObject(restaurantCategoryAndDishes)" class="restaurant-no-categories-manage">暂无菜品类别数据</view>
        <scroll-view scroll-y :show-scrollbar="true" class="restaurant-categories-manage-scroll" v-if="restaurantCategoryAndDishes">
            <!-- 类别名 -->
            <view class="restaurant-categories-dishes" v-for="(dishes, category) in restaurantCategoryAndDishes" :key="category">
                <view class="restaurant-categories-name">{{ category }}</view>
                <view class="restaurant-dishes-container">
					<view v-for="(dish, index) in dishes" :key="index" class="restaurant-dishes">
						<view class="restaurant-dishes-name" :class="{ active: dish.status === 0 }">
							{{ dish.dishName }}
						</view>
					</view>
					<view v-if="dishes.length === 0" class="restaurant-no-dishes">暂无菜品</view>
                </view>
				<!-- 功能操作 -->
				<view class="restaurant-dishes-item-operation">
					<view class="restaurant-dishes-item-operation-sale">
						<text style="padding-right: 5rpx;">下架</text>
						<view @click="changeStatus(restaurantCategoryAndDishes[category].onSale, category)">
							<switch disabled  :checked="restaurantCategoryAndDishes[category].onSale" color="#FFCC33" style="transform:scale(0.8)" />
						</view>
						
						<text style="padding-left: 5rpx;">上架</text>
					</view>
					<view v-if="onSale" class="restaurant-dishes-item-operation-edit-1" @click="clickEdit(category)">修改</view>
					<view v-else class="restaurant-dishes-item-operation-edit-delete">
						<view class="restaurant-dishes-item-operation-edit-2" @click="clickEdit(category)">修改</view>
						<view class="restaurant-dishes-item-operation-delete" @click="clickDelete(category)">删除</view>
					</view>
				</view>
            </view>
			<view class="padding" style="padding: 10rpx;"></view>
        </scroll-view>
		
    </view>
</template>

<style lang="scss" scoped>
/* 上面的SCSS代码 */
</style>


<script setup>
	import { ref, watch } from 'vue';
	const props = defineProps({
		onSale:{
			type: Boolean,
			required: true,
			default: true
		},
		restaurantCategoryAndDishes:{
			type: Object,
			required: true,
			default() {
				return {};
			}
		}
	});
	const isEmptyObject = (obj) => {
	    return Object.keys(obj).length === 0;
	};
	
	
	const restaurantManage = defineEmits([
		'changeStatus',
		'clickEdit',
		'clickDelete'
	]);
	
	const changeStatus = async (status, data) => {
		// console.log("点击");
		restaurantManage('changeStatus', status, data);
	};
	
	//点击修改
	const clickEdit = (category) => {
		// console.log(category);
		restaurantManage('clickEdit', category);
	};
	
	//点击删除
	const clickDelete = (category) => {
		restaurantManage('clickDelete', category);
	}
	
	
</script>

<style lang="scss" scoped>
.restaurant-categories-manage {
    height: calc(100vh - 90px);
    overflow-y: hidden;

    .restaurant-categories-manage-scroll {
        height: 100%; // 滚动区域高度
        
        .restaurant-categories-dishes {
            width: 690rpx; // 类别容器的宽度
            margin: 50rpx auto; // 上下边距
            
            border-radius: 10rpx; 
            box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
            
            .restaurant-categories-name {
                font-size: 46rpx;
                font-weight: bold;
                padding-left: 10rpx; 
				
            }
            .restaurant-dishes-container {
                display: flex;            // 设置为 flex 布局
                flex-wrap: wrap;         // 允许元素换行
                justify-content: space-between; // 使第一个元素对齐左边
				margin: 30rpx 30rpx 20rpx 30rpx;
				border-top: 1px solid #a7a7a7;
				border-bottom: 1px solid #a7a7a7;
                .restaurant-dishes {
                    width: calc(40% - 10rpx); // 每个元素的宽度为 50% 减去间隙，以确保两个在一行
                    display: flex;
                    flex-direction: column;     // 垂直排列菜名
                    font-size: 36rpx;
                    padding: 20rpx;             // 添加内边距
                    .restaurant-dishes-name {
                        margin: 5rpx 0;        // 菜名的上下间距
                        &.active {
                            color: $border-font-color-3; // 激活状态颜色
                        }
                    }
                }
				.restaurant-no-dishes{  
					font-size: 36rpx;       
					color: $border-font-color-3;                  
					padding: 20rpx; 
				}
            }
			
			.restaurant-dishes-item-operation{
				height: 120rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx 0 30rpx;
				font-size: 36rpx;
				.restaurant-dishes-item-operation-sale{
					display: flex;
					align-items: center;
					height: 100rpx;
				}
				.restaurant-dishes-item-operation-edit-1{
					width: 120rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 20rpx;
					background-color: $brand-theme-color;
					margin-left: 180rpx;
				}
				.restaurant-dishes-item-operation-edit-delete{
					display: flex;
					.restaurant-dishes-item-operation-edit-2{
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 20rpx;
						width: 120rpx;
						height: 100rpx;
						background-color: $brand-theme-color;
						margin-left: 50rpx;
					}
					.restaurant-dishes-item-operation-delete{
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 20rpx;
						width: 120rpx;
						height: 100rpx;
						background-color: #FFCCCB ;
						margin-left: 50rpx;
					}
				}
			}
		}
    }
	
	.restaurant-no-categories-manage{
		font-size: 50rpx;
		display: flex;
		justify-content: center;
		padding-top: 50rpx;
	}
}
</style>
